<template>
  <div>
    <el-form class="form" ref="form" :model="cityForm" label-width="80px">
      <div class="swap">
        <div @click="swap">换</div>
      </div>
      <el-form-item label="出发城市">
        <el-autocomplete
          @blur="setValueBlur('departCity')"
          class="inline-input"
          v-model="cityForm.departCity"
          :fetch-suggestions="queryDepCity"
          placeholder="请搜索出发城市"
          :trigger-on-focus="false"
          @select="handleSelectDepCity"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item label="到达城市">
        <el-autocomplete
          @blur="setValueBlur('destCity')"
          class="inline-input"
          v-model="cityForm.destCity"
          :fetch-suggestions="queryArrCity"
          placeholder="请搜索到达城市"
          :trigger-on-focus="false"
          @select="handleSelectArrCity"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item label="出发时间">
        <el-date-picker
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          type="date"
          placeholder="请选择日期"
          v-model="cityForm.departDate"
          style="width: 202px;"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" style="width: 202px;" type="primary" @click="search">搜索</el-button>
      </el-form-item>
    </el-form>
    
  </div>
</template>
<script>
export default {
  data() {
    return {
      restaurants: [],
      cityForm: {
        departCity: '',
        departCode: '',
        destCity: '',
        destCode: '',
        departDate: ''
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() <= Date.now()-(24*60*60*1000)
        }
      }
    }
  },
  methods: {
    setValueBlur(name) {
      if(this.cityForm.departCity.trim().length===0){
        return ;
      }
      if (this.restaurants.length > 0) {
        if (name == 'departCity') {
          this.cityForm.departCity = this.restaurants[0].value
          this.cityForm.departCode = this.restaurants[0].sort
        } else if (name == 'destCity') {
          this.cityForm.destCity = this.restaurants[0].value
          this.cityForm.destCode = this.restaurants[0].sort
        }
      }
    },
    // 出发城市
    async queryDepCity(value, cb) {
      if (!value) {
        return
      }
      this.$store.dispatch('user/getCityList', value).then(res => {
        this.restaurants = this.$store.state.user.cityList
        if(this.restaurants.length===0){
          return cb([{value:'没有找到该城市'}])
        }

        cb(this.restaurants)
      })
      // queryString输入的内容
      // cb输入的内容
    },
    // 到达城市
    queryArrCity(value, cb) {
      if (!value) {
        return
      }
      this.$store.dispatch('user/getCityList', value).then(res => {
        this.restaurants = this.$store.state.user.cityList
         if(this.restaurants.length===0){
          return cb([{value:'没有找到该城市'}])
        }
        cb(this.restaurants)
      })
    },
    // 出发城市下拉
    handleSelectDepCity(item) {
      this.cityForm.departCity = item.value
      this.cityForm.departCode = item.sort
    },
    //到达城市下拉
    handleSelectArrCity(item) {
      this.cityForm.destCity = item.value
      this.cityForm.destCode = item.sort
    },
    search() {
      if (!this.cityForm.departCity) {
        return this.$message.error('请输入出发城市')
      }
      if (!this.cityForm.destCity) {
        return this.$message.error('请输入到达城市')
      }
      if (!this.cityForm.departDate) {
        return this.$message.error('请选择时间')
      }
      this.$router.push({ path: '/air/flights', query: this.cityForm })
      this.$store.commit('user/setHistory', this.cityForm)
    },
    swap() {
      //代码也是需要互换的   还未写
      const tempCity = this.cityForm.departCity
      const tempCode = this.cityForm.departCode
      this.cityForm.departCity = this.cityForm.destCity
      this.cityForm.departCode = this.cityForm.destCode
      this.cityForm.destCity = tempCity
      this.cityForm.destCode = tempCode
    }
  }
}
</script>
<style lang="less" scoped>
.form {
  margin-top: 20px;
  position: relative;
  .swap {
    position: absolute;
    right: 25px;
    top: 20px;
    width: 35px;
    height: 65px;
    border: 1px solid #eee;
    border-left: none;
    div {
      width: 20px;
      height: 20px;
      background: #999999;
      color: #fff;
      line-height: 20px;
      font-size: 14px;
      text-align: center;
      position: absolute;
      right: -10px;
      top: 20px;
      cursor: pointer;
    }
  }
}
</style>